<template>
  <gimi-dialog
    v-model="visible"
    okText="移动"
    :title="modalTitle"
    :okLoading="okLoading"
    @cancel="handleCancel"
    @ok="handleSubmitForm"
  >
    <div class="content-tree">
      <el-tree
        ref="treeRef"
        node-key="id"
        :data="folderTreedata"
        :props="{ label: 'name', children: 'children', id: 'id' }"
        default-expand-all
        highlight-current
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
      >
      </el-tree>
    </div>
  </gimi-dialog>
</template>

<script setup lang="ts">
import { ref, defineEmits, defineProps, PropType, nextTick, computed } from 'vue'
import { ElMessage, ElTree } from 'element-plus'
import { apiGetFolderTreeList, apiMoveMindToFolder, apiUpdateFolder } from '@/apis/work'
import type { Folder, Mind } from '@/types'

interface Tree {
  name: string,
  id: string,
  children?: Tree[]
}
const props = defineProps({
  folderDetail: {
    type: Object as PropType<Folder>,
    default: () => {
      return {}
    }
  },
  mindDetail: {
    type: Object as PropType<Mind>,
    default: () => {
      return {}
    }
  },
  operateType: {
    type: String as PropType<'folder' | 'mind'>
  }
})
const emits = defineEmits(['close-modal'])

const visible = ref(true)
const treeRef = ref<null | InstanceType<typeof ElTree>>(null)
const currentFolderNodeId = ref('')
const folderTreedata = ref<Tree[]>([])

/**
 * 文件夹树形列表数据查询
 */
const queryFolderTreeList = async () => {
  const filterId = props.operateType === 'folder' ? props.folderDetail.id : null
  const data = await apiGetFolderTreeList<Tree[]>({ filterId })
  folderTreedata.value = [
    {
      name: '我的导图',
      id: '',
      children: data
    }
  ]
  if (props.operateType === 'folder') {
    currentFolderNodeId.value = props.folderDetail.parentId || ''
  } else {
    currentFolderNodeId.value = props.mindDetail.folderId || ''
  }
  nextTick(() => {
    treeRef.value?.setCurrentKey(currentFolderNodeId.value)
  })
}
queryFolderTreeList()

const handleNodeClick = (node) => {
  currentFolderNodeId.value = node.id
}

const okLoading = ref(false)
const handleSubmitForm = async () => {
  okLoading.value = true
  try {
    const API = props.operateType === 'folder' ? apiUpdateFolder : apiMoveMindToFolder
    const searchParams = props.operateType === 'folder' ? {
      id: props.folderDetail.id,
      parentId: currentFolderNodeId.value,
      name: props.folderDetail.name
    } : {
      id: props.mindDetail.id,
      folderId: currentFolderNodeId.value
    }
    await API(searchParams)
    ElMessage.success('操作成功')
    handleCancel(true)
  } finally {
    okLoading.value = false
  }
}

const handleCancel = (refresh = false) => {
  emits('close-modal', refresh)
}

const modalTitle = computed(() => {
  if (props.operateType === 'folder') return '移动文件夹'

  return '移动导图'
})
</script>

<style lang="scss" scoped>
.content-tree {
  :deep(.el-tree) {
    height: 400px;
    .el-tree-node__content {
      min-height: 34px;
      line-height: 34px;
      border-radius: 6px;
      cursor: url('~@/assets/images/default.png' ) 4 4, auto;
    }
  }
}
</style>
